<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .container{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: red;
        
    }
    .div1{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 50%;
        height: 50%;
        background-color: blue;
        margin: auto;
    }
</style>
<body>
    <div class="container">
        <div class="div1">margin的值设置为auto，可以让我们对剩余空间进行分配！我们知道，块级元素设置为margin:0 auto；可以左右居中显示！那有没有办法让margin设置为margin:auto之后，上下左右都居中呢？上下左右都居中，就可以实现我们的垂直居中了！

            答案是有的，只要我们让上下有足够的空间，就可以让margin的auto来分配上下空间。
            
            我们可以利用定位的方式，让margin上下左右都有足够的空间！那么就可以用margin:auto来实现垂直居中了！</div>
        </div>
</body>
</html>